import React, { Component, useEffect } from 'react';
import styles from './index.less';
import MonitorWrapper from '../../../components/MonitorWrapper'
import { connect } from 'umi';
import { Spin } from 'antd'
import LoadingIcon from '@/components/LoadingIcon'
const CrowdMonitor = props => {

  const { dispatch, loading, params, tab, tabKey, rentMonitor } = props;
  const { stockPeopleData } = rentMonitor
  useEffect(() => {
    if (tab == tabKey) {
      dispatch({
        type: 'rentMonitor/fetchCommerBuildData',
        payload: 'rentPeople'
      });
    }
  }, [tabKey])

  return (
    <Spin spinning={loading} indicator={LoadingIcon} size="large">
      <MonitorWrapper regionAble='2' dataRow={stockPeopleData} params={params} chartType='人群' nameSpace='rentMonitor' modelData={rentMonitor} dataType='2' destorySign='2' fetchType='stockPeople'/>
    </Spin>
  )
}
export default connect(({ rentMonitor, loading }) => ({
  rentMonitor,
  loading: loading.models.rentMonitor,
  tabKey: rentMonitor.tabKey,
}))(CrowdMonitor)
